<template>
	<view class="container">
		<image src="/static/login/loginbg.png" class="bg"></image>
		<view class="title-area">
			<view class="arrow" @click="toBack">
			</view>
			<view class="title-text">
				确认订单
			</view>
		</view>
		<view class="content-area">
			<view class="step-area">
				<view class="line">
					<view class="step-item">
						<image src="/static/wash-car/blueround.png" mode=""></image>
						<view class="step-text">预约服务</view>
					</view>
					<view class="step-item">
						<image src="/static/wash-car/greenround.png" mode=""></image>
						<view class="step-text">支付订单</view>
					</view>
					<view class="step-item">
						<image src="/static/wash-car/orangeround.png" mode=""></image>
						<view class="step-text">门店服务</view>
					</view>
				</view>
			</view>
			<view class="shop-content-area">
				<view class="">
					<image src="/static/wash-car/shop.png" mode="" class="icon-image"></image>
				</view>
				<view class="shop-content">
					<view class="shop-name">
						伟业汽车美容店 (人民路店)
					</view>
					<view class="shop-local">
						山阳区人民中路33号
					</view>
				</view>

			</view>
			<view class="liaison-man-area">
				<view class="liaison-man-area-left">
					<image src="/static/wash-car/person.png" mode="" class="icon-image"></image>
					<view class="liaison-man-name">
						张先生
					</view>
				</view>
				<view class="liaison-man-phone">
					18656894566
				</view>
			</view>
			<view class="car-area">
				<view class="liaison-man-area-left">
					<image src="/static/wash-car/car.png" mode="" class="car-image"></image>
					<view class="liaison-man-name">
						奔驰FWE4/豫A56487
					</view>
				</view>
				<view class="liaison-man-phone">
					<image src="/static/wash-car/rightarrow.png" mode="" class="right-arrow"></image>
				</view>
			</view>
			<view class="service-product-area">
				<view class="service-product-area-left">
					服务产品
				</view>
				<view class="service-product-area-right">
					<text>共选择<text style="color: blue;">1项</text>服务产品</text>
				</view>
			</view>
			<view class="wash-car-price">
				精洗汽车 <text style="color: red; padding-left: 20rpx;">¥49.9</text>
			</view>
			<view class="car-area coupon-area" @click="toCoupon">
				<view class="liaison-man-area-left">
					<image src="/static/wash-car/coupon.png" mode="" class="car-image"></image>
					<view class="liaison-man-name" style="padding-bottom: 2rpx;">
						代金券/优惠券
					</view>
				</view>
				<view class="liaison-man-phone" style="display: flex; align-items: center;">
					<view style="color: red;">
						-10元
					</view>
					<image src="/static/wash-car/rightarrow.png" mode="" class="right-arrow"
						style="padding: 5rpx 0 0 30rpx;"></image>
				</view>
			</view>
		</view>
	</view>
	<view class="contact-area">
		<view class="contact-left" @click="open">
			<view>
				<image src="/static/kefu.png" mode="" class="contact-image"></image>
			</view>
			<view class="contact-text">
				联系客服
			</view>
		</view>
		<view class="contact-button">
			<view class="total">合计: ¥39.9</view>
			<button class="order-now" @click="openRef">提交订单</button>
		</view>
	</view>
	<uni-popup ref="popupRef" type="dialog" @maskClick="close">
		<view class="custom-popup">
			<view class="popup-option">18642589456</view>
			<view class="popup-option" @click="handleCopy">复制</view>
			<view class="popup-option" @click="close">取消拨号</view>
		</view>
	</uni-popup>
	<uni-popup ref="payRef" type="dialog" @maskClick="payRefClose">
		<view class="pay-area">
			<view class="pay-top-area">
				<view class="">
					<image src="/static/wash-car/xmaker.png" mode="" class="x-maker"></image>
				</view>
				<view class="pay-text">
					请输入支付密码
				</view>
			</view>

			<view class="pay-money-title">
				车辆服务平台
			</view>
			<view class="money">
				¥ 39.90
			</view>
			<view class="pay-style-area">
				<view class="pay-style-title">
					支付方式
				</view>
				<view class="pay-style">
					<view class="pay-style-text">
						零钱
					</view>
					<view class="right-arrow2">

					</view>
				</view>
			</view>
			<view class="password-input">
				<u-message-input :dot-fill="true" :focus="true" maxlength="6" @change="change" @finish="finish"
					:breathe="false" width="70"></u-message-input>
			</view>

		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const toBack = () => {
		uni.navigateBack()
	}
	const popupRef = ref(null);
	// 定义打开弹窗的方法
	const open = () => {
		popupRef.value.open('bottom')
	}
	const close = () => {
		popupRef.value.close()
	}
	const payRef = ref(null);
	const payRefClose = () => {
		payRef.value.close()
	}
	const openRef = () => {
		payRef.value.open('center')
	}
	const finish = (e) => {
		console.log('输入结束，当前值为：' + e)
		payRefClose()
		uni.showLoading({
			title: '支付中...', // 显示提示文字
			mask: true //是否显示透明遮罩，防止触摸穿透
		});
		  setTimeout(() => {
		    // 先关闭加载提示
		    uni.hideLoading();
		    // 再跳转页面
		    uni.navigateTo({
		      url: "/pages/wash-car/order-detail/order-detail"
		    });
		  }, 500);
	}
	const toCoupon = () =>{
		uni.navigateTo({
			url:"/pages/wash-car/coupon/coupon"
		})
	}
</script>

<style scoped>
	.container {
		background-color: #eee;
		position: relative;
		z-index: 1;
		padding: 20rpx 20rpx 140rpx 20rpx;
		height: 100vh;
	}

	.bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		height: 400rpx;
	}

	.title-area {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx 40rpx 20rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.arrow {
		width: 14rpx;
		height: 14rpx;
		border-left-style: solid;
		border-left-width: 2rpx;
		border-bottom-style: solid;
		border-bottom-width: 2rpx;
		transform: rotate(45deg);
	}

	.right-arrow2 {
		width: 12rpx;
		height: 12rpx;
		border-right-style: solid;
		border-right-width: 2rpx;
		border-top-style: solid;
		border-top-width: 2rpx;
		border-color: #a9a9a9;
		transform: rotate(45deg);
	}

	.title-text {
		flex-grow: 1;
		display: flex;
		justify-content: center;
	}

	.content-area {
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.contact-area {
		background-color: #FFFFFF;
		min-height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		box-sizing: border-box;
		width: 100%;
	}

	.contact-left {
		display: flex;
	}

	.contact-text {
		font-size: 24rpx;
		margin-left: 20rpx;
		line-height: 50rpx;
	}

	.contact-image {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
	}

	.total {
		color: red;
		margin-right: 20rpx;
		font-size: 24rpx;
	}

	.step-area {
		padding: 90rpx 40rpx;
		border-bottom: #eee 5rpx solid;
	}

	.line {
		height: 0;
		border-bottom: 1rpx solid #a9a9a9;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.step-item {
		position: relative;
		width: 100rpx;
		height: 100rpx;
	}

	.step-text {
		position: absolute;
		left: 50%;
		top: 50%;
		color: #FFFFFF;
		font-size: 24rpx;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.line image {
		width: 100rpx;
		height: 100rpx;
	}

	.shop-content-area {
		display: flex;
		align-items: center;
		padding: 0 3rpx;
	}

	.shop-content {
		padding: 20rpx;
	}

	.shop-name {
		font-size: 26rpx;
		padding-bottom: 10rpx;
	}

	.shop-local {
		font-size: 20rpx;
		color: #a9a9a9;
	}

	.icon-image {
		width: 30rpx;
		height: 30rpx;
	}

	.liaison-man-area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 3rpx;
	}

	.liaison-man-area-left {
		display: flex;
		align-items: center;
	}

	.liaison-man-name {
		padding-left: 20rpx;
		font-size: 26rpx;
	}

	.liaison-man-phone {
		font-size: 24rpx;
	}

	.car-area {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		border-bottom: #eee solid 1rpx;
	}

	.car-image {
		width: 35rpx;
		height: 28rpx;
		padding-top: 5rpx;
	}

	.right-arrow {
		width: 14rpx;
		height: 24rpx;
		padding-top: 12rpx;
	}

	.service-product-area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;

	}

	.service-product-area-left {
		font-size: 26rpx;
	}

	.service-product-area-right {
		font-size: 20rpx;
	}

	.wash-car-price {
		font-size: 26rpx;
		padding-bottom: 30rpx;
		border-bottom: #eee solid 1rpx;
	}

	.coupon-area {
		border-bottom: none;
		padding-top: 40rpx;
		padding-bottom: 10rpx;
	}

	.contact-button {
		display: flex;
		align-items: center;
	}

	.order-now {
		border-radius: 30rpx;
		min-height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		background-color: blue;
		color: #FFFFFF;
	}

	.custom-popup {
		background-color: #FFFFFF;
	}

	.popup-option {
		min-height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx #eee solid;
	}

	.pay-area {
		background-color: #FFFFFF;
		min-width: 600rpx;
		min-height: 450rpx;
		border-radius: 20rpx;
	}

	.pay-top-area {
		display: flex;
		align-items: center;
		padding: 30rpx;
	}

	.x-maker {
		width: 20rpx;
		height: 20rpx;
	}

	.pay-text {
		font-size: 24rpx;
		display: flex;
		flex-grow: 1;
		justify-content: center;
		padding-right: 20rpx;
	}

	.pay-money-title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		font-size: 20rpx;
	}

	.money {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 48rpx;
		border-bottom: #eee 1rpx solid;
		padding-bottom: 40rpx;
	}

	.pay-style-area {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		font-size: 24rpx;
	}

	.pay-style {
		display: flex;
		align-items: center;
	}

	.pay-style-text {
		padding-right: 10rpx;
	}

	.password-input {
		padding: 0 20rpx;
	}
</style>